<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>{{ $webTitle }}-用户注册</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="/resources/register/css/index.css?v=1" rel="stylesheet" type="text/css"/>
    <style>
        .download_btn {
            width: 89px;
            height: 28px;
            background: url("/resources/register/images/download.png") no-repeat center center;
            background-size: contain;
            text-align: center;
            line-height: 28px;
            color: #fff;
            right: 1rem;
            bottom: 27.5rem;
        }
    </style>
</head>
<body>
<section class="aui-flexView">
    <section class="aui-scrollView">
        <div class="aui-ver-head" style="position: fixed;">
            <img src="/resources/register/images/{{ $bg }}" alt=""/>
        </div>
        <div class="download_btn" style="position: absolute;">
            下载声喵
        </div>
        <div class="aui-ver-form">
            <div style="display: flex;justify-content: center;align-items: baseline;">
                <img class="titleImg" src="/resources/register/images/titleImg.png" alt="">
                <img class="titleImg" src="/resources/register/images/titleImg.png" alt="">
                <span style="font-size: 18px;color:#5F0CF9;margin: 0 8px;">用户注册</span>
                <img class="titleImg" src="/resources/register/images/titleImg.png" alt="">
                <img class="titleImg" src="/resources/register/images/titleImg.png" alt="">
            </div>
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <i class="inputImg"></i>
                    <input id="phone1" name="mobile" type="text" autocomplete="off" placeholder="请输入手机号码"/>
                </div>
            </div>
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <i class="inputImg"></i>
                    <input id="code1" type="text" name="code" autocomplete="off" placeholder="请输入验证码" style="border-radius: 6.7vw 0 0 6.7vw;border-right: none;"/>
                </div>
                <div class="aui-button-code">
                    <input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onclick="sendMessage1()"/>
                </div>
            </div>
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <i class="inputImg"></i>
                    <input id="pw" name="password" type="text" autocomplete="off" placeholder="请输入密码"/>
                </div>
            </div>

            <div class="aui-cell-box">
                <label class="cell-right">
                    <div class="duihaoBox">
                        <img id="check-img" src="/resources/register/images/duihao.png" alt="">
                        <img id="check-img" src="./resources/register/images/duihao.png" alt="">
                    </div>
                    <em><a href="{{ $proUrl }}" target="_blank">同意用户注册协议</a></em>
                </label>
            </div>
            <div class="aui-ver-button">
                <input id="channel_no" type="hidden" name="channel_no" value="{{ $channel_no }}">
                <input id="invite_code" type="hidden" name="invite_code" value="{{ $invite_code }}">
                <input id="app_type" type="hidden" name="app_type" value="{{ $app_type }}">
                <button id="btn-process" type="button" onclick="binding()">立即注册</button>
            </div>
        </div>
    </section>
</section>
<script src="/resources/register/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
  $(function () {
    $('.duihaoBox').click(function () {
      if ($('#check-img').is(':hidden')) {
        $('#check-img').show();
      } else {
        $('#check-img').hide();
      }
    })
  })

  $('.download_btn').on('click',(e)=>{
    window.location.href = "{{ $indexUrl }}"
  })

  var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
  var count = 60;
  var InterValObj1;
  var curCount1;

  function sendMessage1() {
    curCount1 = count;
    var phone = $.trim($('#phone1').val());
    if (!phoneReg.test(phone)) {
      alert("请输入有效的手机号码");
      return false;
    }

    $("#btnSendCode1").attr("disabled", "true");
    $("#btnSendCode1").val(+curCount1 + "秒再获取");
    InterValObj1 = window.setInterval(SetRemainTime1, 1000);
    $.ajax({
      url: "{:U('getSmsCode')}",
      method: "post",
      data: {mobile: phone},
      success: function (data) {
        if (data.status != 1) {
          alert(data.info);
        }
      }
    });
  }

  function SetRemainTime1() {
    if (curCount1 == 0) {
      window.clearInterval(InterValObj1);
      $("#btnSendCode1").removeAttr("disabled");
      $("#btnSendCode1").val("重新发送");
    } else {
      curCount1--;
      $("#btnSendCode1").val(+curCount1 + "秒再获取");
    }
  }

  function binding() {
    var phone = $.trim($('#phone1').val());
    var code = $.trim($('#code1').val());
    if (!phoneReg.test(phone)) {
      alert("请输入有效的手机号码");
      return false;
    }
    if (code == '' || code.length != 4) {
      alert("请输入4位短信验证码");
      return false;
    }
    if ($('#check-img').is(':hidden')) {
      alert('请先同意用户注册协议');
      return false;
    }
    var channel_no = $.trim($('#channel_no').val());
    var invite_code = $.trim($('#invite_code').val());
    var app_type = $.trim($('#app_type').val());
    var password = $.trim($('#pw').val());

    $("#btn-process").attr("disabled", "true");
    $.ajax({
      url: "{:U('process')}",
      method: "post",
      data: {mobile: phone,code: code,channel_no:channel_no,invite_code:invite_code,password:password,app_type:app_type},
      success: function (data) {
        if (data.status == 1) {
          window.location.href = "{{ $indexUrl }}";
        } else {
          alert(data.info);
        }
        $("#btn-process").removeAttr("disabled");
      }
    });
  }
</script>
</body>
</html>
